<template>
  <div class="editor-main component-field">
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane key="config" tab="配置">
        <div class="component-item-field overflow-auto">
          <div style="width: 100%; height: 500px">
            <JSONEditor
              v-if="activeKey === 'config'"
              @put-data="putOption"
              :data="currentOption"
            ></JSONEditor>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="data" tab="数据">
        <div class="component-item-field overflow-auto">
          <div style="width: 100%; height: 500px">
            <JSONEditor
                v-if="activeKey === 'data'"
                @put-data="putData"
                :data="currentData"
            ></JSONEditor>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="request" tab="请求">
        <div class="component-item-field overflow-auto">
          <RequestField></RequestField>
        </div>
      </a-tab-pane>
      <a-tab-pane key="location" tab="位置">
        <div class="component-item-field overflow-auto">
          <a-form :labelCol="{ span: 3 }" labelAlign="left">
            <a-form-item label="id">
              <a-input
                disabled
                style="width: 100%"
                v-model:value="config.currentIndex"
              ></a-input>
            </a-form-item>
            <a-form-item label="left">
              <a-input-number
                style="width: 100%"
                v-model:value="config.config[config.currentIndex].location.x"
              ></a-input-number>
            </a-form-item>
            <a-form-item label="top">
              <a-input-number
                style="width: 100%"
                v-model:value="config.config[config.currentIndex].location.y"
              ></a-input-number>
            </a-form-item>
            <a-form-item label="宽度">
              <a-input-number
                style="width: 100%"
                v-model:value="
                  config.config[config.currentIndex].location.width
                "
              ></a-input-number>
            </a-form-item>
            <a-form-item label="高度">
              <a-input-number
                style="width: 100%"
                v-model:value="
                  config.config[config.currentIndex].location.height
                "
              ></a-input-number>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, ref } from "vue";
import { useConfig } from "@/stores/datav/useConfig";
import JSONEditor from "@/components/viewEditor/JSONEditor/index.vue";
import RequestField from "@/components/viewEditor/RequestField/index.vue";
import { PUT_DATA, PUT_OPTION } from "@/components/viewEditor/typs/pubsubType";
import {IConfigStore} from "@/stores/datav/types";

const pubsub: {
  publish: (name: string) => void;
  subscribe: (name: string, fu: (data?: object) => void) => void;
  unsubscribe: (publishName: object) => void;
} = inject("pubsub");

const config: IConfigStore = useConfig();
const activeKey = ref<string>("config");

const putData = (data: object) => {
  config.config[config.currentIndex].data = data;
  pubsub.publish(PUT_DATA, config.currentIndex);
};

const putOption = (data: object) => {
  config.config[config.currentIndex].option = data;
  pubsub.publish(PUT_OPTION, config.currentIndex);
};

const currentData = computed(() => {
  if (config.currentIndex) {
    return config.config[config.currentIndex].data;
  }
  return {};
});
const currentOption = computed(() => {
  if (config.currentIndex) {
    return config.config[config.currentIndex].option;
  }
  return {};
});
</script>

<style lang="less" scoped>
.component-field {
  padding: 6px;

  /deep/ .ant-tabs-tab-btn {
    color: #fff;
  }

  /deep/ .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: @primary-color;
  }

  /deep/ .ant-form-item-label label {
    color: @white;
  }
}

.component-item-field {
  height: calc(100vh - 40px - 70px);
}
</style>
